<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Setting the event color through object properties </title>

	<script src="../../codebase/dhtmlxscheduler.js?v=5.2.1" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_material.css?v=5.2.1" type="text/css" charset="utf-8">
	
    <style type="text/css" >
        html, body{
            margin:0;
            padding:0;
            height:100%;
            overflow:hidden;
        }
    </style>

    <script type="text/javascript" charset="utf-8">
        function init() {
            scheduler.config.multi_day = true;
            scheduler.config.first_hour = 6;
			scheduler.config.limit_time_select = true;
            scheduler.init('scheduler_here', new Date(2018, 3, 18), "week");

            scheduler.parse([
                { start_date: "2018-04-18 09:00", end_date: "2018-04-18 12:00", text:"English lesson",  color:"#9575CD"},
                { start_date: "2018-04-20 10:00", end_date: "2018-04-21 16:00", text:"Math exam",       color:"#FF5722",  textColor:"white"},
                { start_date: "2018-04-21 10:00", end_date: "2018-04-21 14:00", text:"Science lesson",  color:"#FF9633"},
                { start_date: "2018-04-23 16:00", end_date: "2018-04-23 17:00", text:"English lesson",  color:"#0FC4A7",   textColor:"white"},
                { start_date: "2018-04-24 09:00", end_date: "2018-04-24 17:00", text:"Usual event",     color:"#0288D1",  textColor:"white"}
            ]);

        }
    </script>
</head>
<body onload="init();">
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
</body>
